<template>
	<view class="container">
		<view class="wrapper">
			<view class="inner">
				<scroll-view scroll-y class="scroll">
					<view class="username">
						<view>头像</view>
						<view>
							<image class="avatar" @click="changeAvatar" :src="userinfo.avatar" mode=""></image>
						</view>
					</view>
					<view class="username" @click="changeName">
						<view>姓名</view>
						<view>{{ userinfo.nickname }}</view>
					</view>
					<view class="username">
						<view>手机号</view>
						<view>{{ userinfo.mobile }}</view>
					</view>
					<view class="username" @click="changeAddress">
						<view>修改地址</view>
						<view>{{ address }}</view>
					</view>
					<view class="username" @click="goPath('/pages/user/code/code')">
						<view>修改密码</view>
						<image src="../../../static/images/left.png" mode=""></image>
					</view>
					<view class="geren">
						<view class="">个人资料</view>
						<view class="imgs">
							<view class="" v-for="(item, index) in userinfo.information" :key="index">
								<image :src="item" mode="widthFix"></image>
							</view>
						</view>
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="10"></u-upload>
					</view>
					<view class="xieyi">
						<u-checkbox-group><u-checkbox @change="change" shape="circle"
								label="请勾选同意"></u-checkbox></u-checkbox-group>
						<text class="lianjie" @click="yinsi">用户隐私政策、</text>

						<text class="lianjie" @click="xieyi">服务协议</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">
				<button @click="loginOut()">退出</button>
				<button @click="save()">保存</button>
			</view>
			<!-- 修改昵称 -->
			<u-modal :show="show" :title="title" @confirm="confirm" @cancel="cancel">
				<view class="slot-content"><input style="border:1rpx solid #ccc;padding: 16rpx; border-radius: 8rpx;"
						v-model="nickname" type="text" /></view>
			</u-modal>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				fileList1: [],
				avatar: '',
				nickname: '',
				information: '',
				address: '',
				title: '修改昵称',
				show: false,
				fileList: [],
				lat: '',
				lon: '',
				checked: false
			};
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			xieyi() {
				uni.navigateTo({
					url: '/pages/user/edituserinfo/xieyi'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: '/pages/user/edituserinfo/yinsi'
				});
			},
			change(e) {
				// console.log(e);
				this.checked = e;
				console.log(this.checked);
			},
			// 获取茶艺师的地址数据
			changeAddress() {
				console.log('修改地址');
				let self = this;
				uni.chooseLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res);
						self.lon = res.longitude;
						self.lat = res.latitude;
						self.address = res.address;
						console.log(res.address, self.address);
					}
				});
			},
			// 上传图片
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				console.log(this.fileList1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map(item => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
				// console.log(this.fileList1);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sanju.xinyunweb.com/api/newupload/postImage',
						// url: 'https://chazhichashi.rchz.top/api/newupload/postImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: res => {
							setTimeout(() => {
								resolve(res.data.data);
								console.log(JSON.parse(res.data));
								let fileList = [];
								this.fileList.push({
									url: JSON.parse(res.data).data
								});
								let str = '';
								console.log(this.fileList.length);
								for (let i = 0; i <= this.fileList.length - 1; i++) {
									str += this.fileList[i].url + ',';
								}
								if (str.length > 0) {
									str = str.substr(0, str.length - 1);
								}
								console.log(str, '1111111');
								this.information = str;
							}, 1000);
						}
					});
				});
			},
			save() {
				if (!this.checked) {
					uni.showToast({
						title: '请勾选同意用户隐私政策和服务协议',
						icon: 'none'
					});
					return;
				}
				this.https('/order/updateUserInfo', {
					avatar: this.avatar,
					nickname: this.nickname,
					information: this.information,
					lon: this.lon,
					lat: this.lat,
					address: this.address
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1000,
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1100)
					this.getInfo();
					this.fileList1 = [];
				});
			},
			getInfo() {
				this.https('/order/getUserinfo', {}).then(res => {
					//https://sanju.xinyunweb.com
					const { avatar } = res.data
					if (!avatar.includes('https')) {
						res.data.avatar = 'https://sanju.xinyunweb.com' + avatar
					}
					this.userinfo = res.data;
					this.avatar = res.data.avatar;
					this.nickname = res.data.nickname;
					this.information = res.data.information;
					this.lat = res.data.lat;
					this.lon = res.data.lon;
					this.address = res.data.address;
					uni.setStorageSync('userinfo', res.data);
				});
			},
			changeAvatar() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者打开相机
					success: function(res) {
						uni.uploadFile({
							url: 'https://sanju.xinyunweb.com/api/newupload/postImage',
							// url: 'https://chazhichashi.rchz.top/api/newupload/postImage',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: uploadFileRes => {
								let data = JSON.parse(uploadFileRes.data);
								console.log(data);
								_this.userinfo.avatar = data.data;
								_this.avatar = data.data;
							}
						});
					}
				});
			},
			changeName() {
				console.log('11111');
				this.show = true;
			},
			confirm() {
				this.show = false;
				this.userinfo.nickname = this.nickname;
			},
			cancel() {},
			loginOut() {
				uni.showModal({
					content: '您确定要退出吗？',
					success(res) {
						if (res.confirm) {
							uni.clearStorage();
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}, 700);
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-flow: column;

		.wrapper {
			flex: 1;
			position: relative;
			width: 100%;

			.inner {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				padding-bottom: 32rpx;
				box-sizing: border-box;

				.scroll {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.lianjie {
		font-size: 26rpx;
		color: steelblue;
	}

	.xieyi {
		display: flex;
		padding: 32rpx;
	}

	.geren {
		padding: 32rpx;

		.imgs {
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			image {
				width: 200rpx;
			}
		}
	}

	.username {
		display: flex;
		width: 670rpx;
		justify-content: space-between;
		margin: 0 auto;
		height: 100rpx;
		align-items: center;
		border-bottom: solid 2rpx #dde0e4;

		view:nth-child(1) {
			color: #000000;
			font-size: 28rpx;
		}

		view:nth-child(2) {
			color: #666666;
			font-size: 28rpx;
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		image {
			width: 14rpx;
			height: 28rpx;
		}
	}

	.btn {
		display: flex;
		justify-content: space-between;
		// position: fixed;
		width: 100%;
		// bottom: 100rpx;
	}

	.btn button {
		width: 240rpx;
		height: 80rpx;
		background: #45bb52;
		border-radius: 16rpx;
		color: #fff;
		font-size: 32rpx;
		line-height: 80rpx;
	}
</style>